<template>
  <div>
    <div class="main-re">
      <div class="main-left">
        <ProgramHeader :program="program"></ProgramHeader>
        <div class="n-songtb">
          <div class="prohead">
            <a href="javascript:;" class="open" v-if="show" @click="change(false)">
              收起
              <i class="icon"></i>
            </a>
            <a href="javascript:;" class="close" v-else @click="change(true)">
              展开
              <i class="icon"></i>
            </a>
            <div class="total">
              <strong class="f-fw1">
                节目包含歌曲列表
                <span class="s-fs3" v-if="program.songs">（{{ program.songs.length }}首歌）</span>
              </strong>
            </div>
          </div>

          <div class="song-list-pre-cache" :style="`display:${block};`">
            <table class="m-table">
              <tbody v-if="program.songs">
              <tr v-for="(item,index) in program.songs" :key="index" v-if="item.name!=null">
                <td class="filst" style="width: 11.5%;">
                  <div class="hd">
                    <span class="num-hd">{{ index + 1 }}</span>
                    <span class="bg-img" style="cursor: pointer" title="播放"></span>
                  </div>
                </td>
                <td class="rank" style="width: 40%;">
                  <div class="f-cb">
                    <router-link :to="{name:'SongDetail',params:{id:item.id}}" :title="item.name">
                      {{ item.name }}
                    </router-link>
                  </div>
                </td>
                <td class="s-fc3" style="width: 14%;">
                  <span class="u-dur">{{ voiceDuration(item.duration) }}</span>
                  <div class="oper">
                    <a href="javascript:;" title="添加到播放列表"></a>
                    <span class=" s-bg-11" title="收藏">收藏</span>
                    <span class=" u-icn-81" title="分享">分享</span>
                    <span class=" s-bg-12" title="下载">下载</span>
                  </div>
                </td>
                <td class="singer" style="width: 14%;">
      <span class="text" v-if="item.artists[0]">
        <router-link :to="{name:'Work',params: {id: item.artists[0].id}}"
                     :title="item.artists[0].name">{{ item.artists[0].name }}</router-link>
      </span>
                </td>
                <td class="singer" style="width:19.5%;">
      <span class="album" v-if="item.album">
        <router-link :to="{name:'AlbumDetail',params:{id:item.album.id}}" :title="item.album.name">{{item.album.name }}</router-link>
      </span>
                </td>
              </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div class="main-right">
        <div class="g-wrap7">
          <h3 class="u-hd3">更多节目
            <router-link :to="{name:'DjRadioDetail',query:{id:radioId}}" class="more">全部></router-link>
          </h3>
          <ul class="m-piclist">
            <li v-for="(item,index) in MoreProgram" :key="index">
              <div class="cver">
                <router-link :to="{name:'ProgramDetail',query:{id:item.id}}">
                  <img :src="item.coverUrl" alt="">
                </router-link>
              </div>
              <div class="info">
                <p class="f-thide">
                  <router-link :to="{name:'ProgramDetail',query:{id:item.id}}" class="f-ss2">{{item.name}}</router-link>
                </p>
                <p>
                  <span class="by">Vol.{{item.serialNum}}</span>
                </p>
              </div>
            </li>
          </ul>
          <h3 class="u-hd5">网易云音乐多端下载</h3>
          <ul class="m-multi">
            <li>
              <a href="#">
                iPhone
              </a>
            </li>
            <li>
              <a href="#">PC</a>
            </li>
            <li>
              <a href="#">Android</a>
            </li>
          </ul>
          <p class="mu-p">同步歌单，随时畅听320k好音乐</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ProgramHeader from "@/views/ProgramDetail/ProgramHeader";
import {voiceDuration} from "@/utils/voiceDuration";
import {reqUserRadioList} from "@/http/api";

export default {
  name: "index",
  components: {
    ProgramHeader
  },
  data() {
    return {
      program: {},
      voiceDuration: voiceDuration,
      show: true,
      block: 'block',
      MoreProgram: [],
      radioId: ''
    }
  },
  computed: {},
  methods: {
    change(str) {
      this.show = str
      if (str) {
        this.block = 'block'
      } else {
        this.block = 'none'
      }
    },
    async getProgramDetail() {
      let result = await this.$API.reqDjProgramDetail(this.$route.query.id)
      this.program = result.data.program
      this.radioId = result.data.program.radio.id
    },
    async getMoreProgram() {
      let result = await this.$API.reqUserRadioList(this.radioId)

      this.MoreProgram = result.data.programs.slice(0, 5)
    },

  },
  mounted() {
    this.getProgramDetail()
    setTimeout(() => {
      this.getMoreProgram()
    }, 500)
  }
}
</script>

<style scoped lang="less">
.main-re {
  width: 982px;
  margin: 0 auto;
  height: 100%;
  overflow: hidden;
  border: 1px solid #D3D3D3;

  .main-left {
    width: 710px;
    float: left;
    border-right: 1px solid #D3D3D3;

    .n-songtb {
      width: 640px;
      height: auto;
      margin: 27px auto 0 auto;
      overflow: hidden;

      .prohead {
        width: 620px;
        margin: 0 auto;
        height: 32px;
        padding: 0 10px;
        overflow: hidden;
        background: #f7f7f7;
        border: 1px solid #d9d9d9;
        line-height: 33px;

        .close {
          float: right;
          margin: 7px 6px 0 0;
          line-height: 17px;
          color: #666;

          .icon {
            width: 9px;
            height: 5px;
            background-position: -75px -20px;
            margin-left: 5px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-image: url("../../assets/icon2.png");
          }
        }

        .open {
          float: right;
          margin: 7px 6px 0 0;
          line-height: 17px;
          color: #666;

          .icon {
            width: 9px;
            height: 5px;
            background-position: -75px -29px;
            margin-left: 5px;
            display: inline-block;
            overflow: hidden;
            vertical-align: middle;
            background-image: url("../../assets/icon2.png");
          }
        }

        .total {
          .f-fw1 {
            font-weight: bold;

            .s-fs3 {
              color: #666;
              font-weight: normal;
            }
          }
        }
      }

      .song-list-pre-cache {
        .m-table {
          width: 640px;
          box-sizing: border-box;
          margin: 0 auto;
          border-bottom: 1px solid #D9D9D9;
          border-left: 1px solid #D9D9D9;
          border-right: 1px solid #D9D9D9;

          tr {
            width: 100%;
            vertical-align: inherit;
            font-weight: bold;
            text-align: -internal-center;

            th {
              text-align: left;
              height: 38px;
              background-color: #f7f7f7;
              background-position: 0 0;
              background-repeat: repeat-x;
              border-right: 1px solid #DEDEDE;

              div {
                height: 18px;
                line-height: 18px;
                padding: 8px 10px;
                color: #666;
                font-weight: normal;
                background-position: 0 -56px;
              }
            }
          }

          tbody {
            tr:nth-child(even) {
              background-color: #F7F7F7;
            }

            tr {
              height: 30px;

              &:hover .oper {

                display: block !important;
              }

              &:hover .u-dur {
                display: none;
              }

              td {
                height: 30px;
                line-height: 30px;
                display: inline-block;
                text-align: left;

                a {
                  display: inline-block;
                  max-width: 88%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }

              .filst {
                .hd {
                  height: 18px;
                  margin-top: 6px;

                  .num-hd {
                    color: #666;
                    width: 25px;
                    height: 18px;
                    display: inline-block;
                    font-weight: normal;
                    float: left;
                    line-height: 18px;
                    margin-left: 15px;
                    margin-right: 10px;
                  }

                  .bg-img {
                    float: left;
                    display: inline-block;
                    width: 17px;
                    height: 17px;
                    background: url("../../assets/table.png") no-repeat 0 -103px;
                  }
                }
              }

              .rank {
                .f-cb {
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  display: flex;
                  align-content: center;

                  a {
                    color: #666;
                    overflow: hidden;
                    max-width: 88%;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    font-weight: normal;
                  }

                  .texe {
                    margin-left: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .icon-img {
                      display: inline-block;
                      width: 17px;
                      height: 17px;
                      background: url("../../assets/table.png") no-repeat -20px -128px;
                    }

                    .txt {
                      a {
                        color: #333;
                        font-weight: normal;
                      }
                    }
                  }

                  a {
                    margin-left: 10px;

                    .img-data {
                      width: 50px;
                      height: 50px;
                    }
                  }

                }
              }

              .s-fc3 {
                .oper {
                  display: none;
                  float: left;
                  margin-top: 6px;

                  a {
                    width: 13px;
                    height: 13px;
                    float: left;
                    margin-top: 2px;
                    display: inline-block;

                    background: url("../../assets/icon.png") no-repeat 0 -700px;

                  }

                  .s-bg-11 {
                    float: left;
                    width: 18px;
                    height: 16px;
                    margin: 2px 0 0 4px;
                    overflow: hidden;
                    text-indent: -999px;
                    cursor: pointer;
                    background: url("../../assets/table.png") no-repeat 0 -174px;
                  }

                  .u-icn-81 {
                    float: left;
                    width: 18px;
                    height: 16px;
                    margin: 2px 0 0 4px;
                    overflow: hidden;
                    text-indent: -999px;
                    cursor: pointer;
                    background: url("../../assets/table.png") no-repeat 0 -195px;
                  }

                  .s-bg-12 {
                    float: left;
                    width: 18px;
                    height: 16px;
                    margin: 2px 0 0 4px;
                    overflow: hidden;
                    text-indent: -999px;
                    cursor: pointer;
                    background: url("../../assets/table.png") no-repeat -81px -174px;
                  }
                }

                .u-dur {
                  color: #666;
                  margin-left: 5px;
                  font-weight: normal;
                }
              }

              .singer {
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;

                .text {
                  a {
                    color: #666;
                    margin-left: 5px;
                    font-weight: normal;
                  }
                }

                .album {

                  margin-left: 5px;

                  a {
                    color: #666;
                    font-weight: normal;

                  }
                }
              }
            }
          }
        }
      }
    }

  }

  .main-right {
    width: 270px;
    height: 800px;
    float: right;

    .g-wrap7 {
      padding: 20px 40px 40px 30px;

      .u-hd3 {
        height: 23px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;

        .more {
          float: right;
          font-weight: normal;
          font-family: simsun, \5b8b\4f53;
          color: #666;
        }
      }

      .m-piclist {
        height: auto;
        overflow: hidden;
        margin-left: -13px;
        padding-bottom: 25px;

        li {
          float: left;
          width: 200px;
          height: 50px;
          margin-bottom: 15px;
          line-height: 24px;

          .cver {
            width: 50px;
            float: left;
            height:50px;

            a {
              color: #333;

              img {
                display: block;
                width: 50px;
                height:50px;
              }
            }
          }

          .info {
            float: left;
            margin-left: 10px;
            line-height: 24px;
            p{
              width: 140px;
.by{
  float: left;
  color: #999;
}
            }
            .f-thide{
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              word-wrap: normal;
              .f-ss2{
                font-size: 14px;
                color: #000;
              }
            }
          }
        }
      }

      .u-hd4 {
        height: 23px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
      }

      .m-rctlist {
        overflow: hidden;
        height: auto;

        li {
          float: left;
          width: 200px;
          height: 50px;
          margin-bottom: 15px;
          line-height: 24px;

          .cver {
            float: left;
            width: 50px;
            height: 50px;
            position: relative;

            img {
              width: 50px;
              height: 50px;
            }

            .cver-a {
              width: 50px;
              height: 50px;
              position: absolute;
              top: 0;
              left: 0;
              display: inline-block;
            }
          }

          .info {
            float: left;
            margin-left: 10px;
            line-height: 24px;
            width: 140px;

            .cver-title {
              max-width: 100%;

              a {
                font-size: 14px;
                color: #000;
                max-width: 100%;
                display: inline-block;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }

            .cver-name {
              margin-top: -7px;
              display: flex;
              align-items: center;
              max-width: 100%;

              .cver-name-a {
                color: #666;
                max-width: 100%;
                margin: 0 7px;
                display: inline-block;
              }

              img {
                width: 13px;
                height: 13px;

              }
            }
          }
        }
      }

      .u-hd5 {
        height: 23px;
        margin-top: 30px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ccc;
      }

      .m-multi {
        height: 65px;
        margin-bottom: 10px;
        background-position: 0 -392px;
        background-image: url("../../assets/sprite.png");

        li {
          float: left;

          &:nth-child(1) {
            a {
              display: block;
              width: 42px;
              height: 48px;
              text-indent: -9999px;
            }
          }

          &:nth-child(2) {
            width: 60px;
            height: 48px;
            margin: 0 26px 0 30px;

            a {
              display: inline-block;
              text-indent: -9999px;
              width: 60px;
              height: 48px;
            }
          }

          &:nth-child(3) {
            a {
              display: block;
              width: 42px;
              height: 48px;
              text-indent: -9999px;
            }
          }
        }
      }

      .mu-p {
        color: #999;
      }
    }
  }
}
</style>